<template>
	<view class="content">

		<view class="title-bar">
			<!-- 	<view @click="showsRegionSelect(1)">{{province}} <u-icon name="arrow-down" :size="34"
					class="icons"></u-icon> </view> -->
			<view class="">{{province}} <u-icon name="arrow-down" :size="34" class="icons"></u-icon></view>
			<view @click="showsRegionSelect(2)">{{city}} <u-icon name="arrow-down" :size="34" class="icons"></u-icon>
			</view>
			<!-- <view @click="showsRegionSelect(3)">{{area}} <u-icon name="arrow-down" :size="34" class="icons"></u-icon>
			</view> -->
		</view>
		<view class="zhanwei"></view>
		<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
			:scroll-top="scrollToTop" :scroll-with-animation="true">
			<view class="conts-list">
				<view class="conts-item" v-for="(item, index) in contsList" :key="index"
					@click="toPage('/Content/Detail', item.id)">
					<!-- mode="aspectFit"  -->
					<image :src="item.picture" mode="fill" class="images"></image>
					<view class="my-item">
						<view class="name" style="margin-bottom: 0rpx">{{item.name}}</view>
						<!-- <view class="contents level my-conts" v-html="item.introduction"> </view> -->
						<view class="contents address" style="margin-top: 0rpx;">
							{{ item.address }}
						</view>
						<view class="contents address">
							距您{{getAdd(item) && parseFloat(getAdd(item)).toFixed(2) }}km
						</view>
						<view class="money-box">
							<view class="money"><span class="my">¥ {{ (item.price && parseFloat(item.price  / 100).toFixed(2)) || '--' }}</span> 起</view>
							<view class="rate" style="margin-top: -4rpx">
								<span v-if="!item.score">暂无评分</span>
								<u-rate active-color="#FFD100" size="32" :current="item.score * 0.5" :disabled="true" v-else>
								</u-rate>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loadmore">
				<u-loadmore :status="status" />
			</view>

		</scroll-view>
		<Nav :current="navActive"></Nav>


		<view :class="{'picker1': ac == 1, 'picker2': ac == 2, 'picker3': ac == 3  }">
			
			<u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"
				:defaultRegion="defaultAddress"></u-picker>
		</view>
		<!-- <u-picker v-model="shows1" mode="region" :params="params1" @confirm="confirm" :value="[province]" :defaultRegion: ['山东省']   ></u-picker> -->
		<!-- <u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"></u-picker>
		<u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"></u-picker> -->
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue';
	import {
		provide
	} from "vue";
	export default {
		components: {
			Nav,
		},
		data() {
			return {
				navActive: 1,
				ac: 1,
				shows: false,
				valuearr: [],
				params: {
					province: true,
					city: true,
					area: true,
				},
				scrollToTop: '',
				status: 'loadmore', // this.status = 'nomore'  设置底部加载更多显示


				province: '辽宁省',
				city: '全市',
				area: 'xx区/县',
				defaultAddress: ['辽宁省'],
				show: true,
				columns: ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市',
					'葫芦岛市'],
				index: 0,

				contsList: [],
				myAdds: {}
			}
		},
		onHide() {
			uni.pageScrollTo({
				scrollTop: 1, //距离页面顶部的距离
				duration: 0
			});
		},
		onShow() {
			this.scrollToTop = 0;
			
			this.getAddress();
			
		},
		methods: {
			// 获取距离
			 getAdd(item) {
				if(!(item.position.split(',')[1] == 0)) {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
				} else {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
					let add = item.address;
					return '--'
				}
			},
			calculateDistance(lat1, lon1, lat2, lon2) {
			    const R = 6371; // 地球半径，单位：千米  
			    const dLat = this.deg2rad(lat2-lat1);  // deg2rad below  
			    const dLon = this.deg2rad(lon2-lon1);   
			    const a =   
			        Math.sin(dLat/2) * Math.sin(dLat/2) +  
			        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *   
			        Math.sin(dLon/2) * Math.sin(dLon/2);   
			    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));   
			    const d = R * c; // 距离，单位：千米  
			    return d;  
			},
			deg2rad(deg) {  
			    return deg * (Math.PI/180)  
			},
			
			// 获取定位
			getAddress() {
				console.log('获取地址信息')
				// http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=json&pois=1
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {;
						res.location = res.latitude + ',' + res.longitude
						// let ak = '6f5443ecb71639a8c135d88dacd5241b';
						let ak = '';
						// ak = 'GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos';
						var url = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=6f5443ecb71639a8c135d88dacd5241b&output=json&coordtype=wgs84ll&location=${res.location}`;
						_this.$http({
							url: url,
							method: 'GET',
							hideLoading: true,
							data: {},
							success: res => {
								if(res.status == 0) {
									_this.myAdds = res;
									_this.address = res.result.addressComponent.city;
									_this.city = _this.address;
								}
								// let data = res;
								// console.log('地址信息', res, 'wgs84')
							},
							fail: err => { },
							complete: e => {
								_this.getLocationData();
							}
						})
					},
					fail: function(res) {
						console.log('失败', res)
					}
				});
			},
			// 下拉框的确定
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			//页面跳转
			toPage(e, id) {
				console.log(id, '----------------');
				uni.navigateTo({
					url: `/pages/myHomeDetail/index?id=${id}`
				});
			},
			// 按照地区获取景区信息
			getLocationData() {
				this.contsList = [];
				this.status = 'loading';
				
				// console.log('获取景区列表')
				this.$http({
					url: this.$myApi.scenicList + '?province=' + this.province + '&city=' + this.city,

					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						res.rows.map(item => {
							if((item.position.split(',')[1] == 0)) {
							
								let add = item.address;
								// let ak = '6f5443ecb71639a8c135d88dacd5241b';
								let ak = '';
								var url = `https://api.map.baidu.com/geocoding/v3/?address=${add}&output=json&ak=${ak}`;
								let adds = '';
								this.$http({
									url: url,
									method: 'GET',
									hideLoading: true,
									data: {},
									success: res => {
										
										let data = res;
										if(res.status == 0) {
											item.position = + data.result.location.lng + ','  + data.result.location.lat 
										} else {
											
										}
									
									},
									fail: err => {
										// console.log(err);
									},
									complete: e => {
										
									}
								})	
							}
						})
						this.contsList = res.rows;
						
					},
					fail: err => {
						console.log(err, '失敗')

					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			// 获取景区信息
			getData() {
				this.status = 'loading';
				// console.log('获取景区列表')
				this.$http({
					url: this.$myApi.scenicList,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						this.contsList = res.rows;
					},
					fail: err => {
						console.log(err, '失敗')

					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			// 地址选择
			GoPage(url, data) {
				uni.navigateTo({
					url: `/pages/Selectcity/index?url=${url}&address=${data}`
				});
			},
			// 详情页
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/myHomeDetail/index'
				})
			},
			// 确认
			confirm(e) {
				// console.log(e, 8888)
				try {
					this.province = '辽宁省';
					this.city = '沈阳市';
					this.area = 'xx区/县';
				} catch (e) {}
				try {
					this.city = e.city.label;
					this.area = 'xx区/县';
				} catch (e) {}
				try {
					this.area = e.area.label
				} catch (e) {}



				// this.froms.city = this.province + ' ' + this.city + ' ' + this.area
				// this.defaultAddress = [this.province, this.city, this.area];
				console.log(this.defaultAddress)
				this.getLocationData();

			},
			// 
			showsRegionSelect(index) {
				this.shows = true;
				this.ac = index;
				if (index == 1) {
					return;
					this.params = {
						province: true,
						city: false,
						area: false,
					}
				} else if (index == 2) {
					
					this.params = {
						province: false,
						city: true,
						area: false,
					}
				} else if (index == 3) {
					this.params = {
						province: false,
						city: false,
						area: true,
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-bar {
		position: fixed;
		top: 0rpx;
		width: 750rpx;
		height: 90rpx;
		background-color: #fff;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #686868;
		box-sizing: border-box;
		padding-left: 30rpx;

		view {
			width: 375rpx;
			text-align: center;

			// margin-right: 70rpx;
			.icons {
				margin-left: 24rpx;
				position: relative;
				top: 6rpx;
			}
		}
	}

	.zhanwei {
		width: 100%;
		background-color: transparent;
		height: 90rpx;
	}

	.loadmore {
		margin: 30rpx auto;
	}

	.conts-list {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 10rpx auto 30rpx;

		.conts-item {
			display: flex;
			flex-direction: row;
			width: 637rpx;
			// height: 344rpx;
			border-bottom: 1rpx solid #707070;
			margin: 0 auto;
			padding: 36rpx 3rpx 36rpx 7rpx;

			&:last-child {
				border-bottom: 0rpx;
			}

			.contents {
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #676767;
				margin-top: 10rpx;
				height: 32rpx;
				height: 32rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.address {
				-webkit-line-clamp: 1;
			}

			.level {
				// color: #FFD100;
			}

			.my-conts {
				line-height: 32rpx;
				height: 90rpx !important;
				position: relative;
				top: -8rpx;
				display: -webkit-box;
				-webkit-line-clamp: 3 !important;
				/* 控制显示行数 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				/* 防止内容被强制折行 */
				// 
			}


			.rate {
				float: right;
				font-size: 24rpx;
				color: #676767;
			}

			.my-item {
				width: 374rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.money-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 16rpx;
				}
				.money {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					height: 30rpx;
					line-height: 30rpx;
					color: #676767;
					// margin-top: 24rpx;
					.my {
						font-size: 30rpx;
						margin-right: 8rpx;
					}
				}

				.loa {
					height: 30rpx;
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #676767;
				}

				.detail {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #676767;
					line-height: 38px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-bottom: 8rpx;
					height: 76rpx;
				}

				.name {
					font-size: 26rpx;
					line-height: 46rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1F1F1F;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-bottom: 12rpx;
				}
			}

			.images {
				width: 212rpx;
				height: 164rpx;
				border-radius: 10rpx;
				background-color: #eee;
				margin-right: 36rpx;
			}
		}


	}
</style>

<style lang="scss">
	::v-deep {
		picker-view-column:first-child {
			// visibility: hidden !important; 
		}
	}
</style>
<style>
	page {
		background-color: #EFEFEF;

	}
</style>